<template>
  <div>
    <div class="flex-x-sb flex-y-center">
      <el-select :disabled="true" size="small" v-model="defaultUser" style="flex: 1;width:0;" placeholder="">
        <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        <el-option label="总店" value="0" v-if="selectType == 'user'"></el-option>
      </el-select>
      <el-button type="primary" size="small" @click="select" style="margin-left: 5px">选择</el-button>
      <el-button type="primary" size="small" v-if="showHeadButton" @click="selectHead" style="margin-left: 5px">总店</el-button>
    </div>
    <a-modal title="用户选择" style="width: 300px" v-model="visible" size="small" @ok="handleConfirm">
      <div class="table-page-search-wrapper">
        <el-form size="small" inline label-width="50px" label-suffix=":">
          <el-form-item label="昵称">
            <el-input v-model="queryParam.keyword" placeholder="请输入关键词"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" @click="$refs.table.refresh(true)">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <STable
        ref="table"
        size="small"
        rowKey="id"
        :columns="columns"
        :data="loadData"
        :alert="true"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
          type: dataType == 'single' ? 'radio' : 'checkbox',
        }"
        showPagination="auto"
      >
        <span slot="baseinfo" slot-scope="text, record">
          <img style="width: 20px; heigth: 20px" :src="record.avatar" />
          <span style="margin-left: 10px" :length="20" tooltip>{{ record.name }} </span>
        </span>
      </STable>
    </a-modal>
  </div>
</template>

<script>
import storage from 'store'
import { STable } from '@/components'
import { storeUserList } from '@/api/user'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '用户信息',
    scopedSlots: { customRender: 'baseinfo' },
  },
]

export default {
  name: 'SelectUser',
  components: {
    STable,
  },
  props: {
    dataType: {
      type: String,
      default: 'single',
    },
    defaultUser: {
      type: [String, Array],
      default: null,
    },
    returnType: {
      type: String,
      default: 'id',
    },
    selectType: {
      type: String,
      default: 'user',
    },
    showHeadButton: {
      type: Boolean,
      default: false
    },
    parentId: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      returnUserInfo: [],
      columns,
      userText: [],
      userId: [],
      userTextTrans: [],
      userIdTrans: [],
      visible: false,
      queryParam: {},
      selectedRowKeys: [],
      selectedRows: [],
      userList: [],
      // 加载数据方法 必须为 Promise 对象
      loadData: async (parameter) => {
        this.queryParam.store_id = storage.get('storeId') || 1
        Object.assign(parameter, this.queryParam)
        const res = await storeUserList(parameter)
        this.userList = res.data.data
        return res.data
        // this.queryParam.store_id = storage.get('storeId') || 1
        // Object.assign(parameter, this.queryParam)
        // return getSelectUserList(parameter).then(res => {
        //   return res.data
        // })
      },
    }
  },
  computed: {
    rowSelection: {
      get() {
        return {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange,
        }
      },
      set(v) {
        return {
          selectedRowKeys: v,
          onChange: v,
        }
      },
    },
  },
  watch: {},
  created() {
    this.queryParam.type = this.selectType
    this.queryParam.parent_id = this.parentId
    this.loadData({ pageNo: 1, pageSize: 99999 })
  },
  mounted() {
    
  },
  methods: {
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows

      // this.userTextTrans = []
      // this.userIdTrans = []
      // this.selectedRowKeys = selectedRowKeys
      // this.selectedRows = selectedRows
      // if (this.dataType === 'single') {
      //   for (var m = 0; m < selectedRows.length; m++) {
      //     this.userTextTrans.push(selectedRows[m].nickname)
      //     this.userIdTrans.push(selectedRows[m].id)
      //   }
      //   console.log(this.userTextTrans)
      //   console.log(this.userIdTrans)
      //   this.userText = this.unique(this.userTextTrans).pop()
      //   this.userId = this.unique(this.userIdTrans).pop()
      // } else {
      //   for (var i = 0; i < this.selectedRows.length; i++) {
      //     this.userTextTrans.push(this.selectedRows[i].nickname)
      //     this.userIdTrans.push(this.selectedRows[i].id)
      //   }
      //   this.userText = this.unique(this.userTextTrans)
      //   this.userId = this.unique(this.userIdTrans)
      // }
      // this.$emit('setUid', this.userId)
    },
    handleConfirm() {
      this.visible = false
      console.log(this.userList)
      if (this.dataType == 'single') {
        if (this.returnType == 'id') {
          return this.$emit('userInfo', this.selectedRowKeys[0])
        } else {
          let userInfo = null
          for (let i = 0; i < this.userList.length; i++) {
            if (this.userList[i].id == this.selectedRowKeys[0]) {
              userInfo = this.userList[i]
            }
          }
          return this.$emit('userInfo', userInfo)
        }
      }
      return this.$emit('userInfo', this.selectedRowKeys)
      // this.userTextTrans = []
      // this.userIdTrans = []
      // this.returnUserInfo = []
      // if (this.dataType === 'single') {
      //   for (var m = 0; m < this.selectedRows.length; m++) {
      //     this.userTextTrans.push(this.selectedRows[m].nickname)
      //     this.userIdTrans.push(this.selectedRows[m].id)
      //     this.returnUserInfo.push(this.selectedRows[m])
      //   }
      //   this.userText = this.unique(this.userTextTrans).pop()
      //   this.userId = this.unique(this.userIdTrans).pop()
      //   if (this.userId instanceof Array && this.userId.length < 1) {
      //     this.$emit('userInfo', 0)
      //   } else {
      //     if (this.returnType !== 'id') {
      //       this.$emit('userInfo', this.returnUserInfo)
      //     } else {
      //       this.$emit('userInfo', this.userId)
      //     }
      //   }
      // } else {
      //   for (var i = 0; i < this.selectedRows.length; i++) {
      //     this.userTextTrans.push(this.selectedRows[i].nickname)
      //     this.userIdTrans.push(this.selectedRows[i].id)
      //     this.returnUserInfo.push(this.selectedRows[i])
      //   }
      //   this.userText = this.unique(this.userTextTrans)
      //   this.userId = this.unique(this.userIdTrans)
      //   if (this.returnType !== 'id') {
      //     this.$emit('userInfo', this.returnUserInfo)
      //   } else {
      //     this.$emit('userInfo', this.userId)
      //   }
      // }
      // this.visible = false
    },
    unique(arr) {
      return Array.from(new Set(arr))
    },
    select() {
      this.userTextTrans = []
      this.userIdTrans = []
      this.returnUserInfo = []
      this.visible = true
    },
    selectHead () {
      this.$emit('setParentHead')
    },
    handleChange(value) {
      var uid = []
      var returnInfo = []
      for (var i = 0; i < this.selectedRows.length; i++) {
        for (var j = 0; j < value.length; j++) {
          if (this.selectedRows[i].nickname === value[j]) {
            uid.push(this.selectedRows[i].id)
            returnInfo.push(this.selectedRows[i])
          }
        }
      }
      this.userId = uid
      this.returnUserInfo = returnInfo
      if (this.dataType === 'single') {
        if (this.userId instanceof Array && this.userId.length < 1) {
          this.$emit('userInfo', 0)
        } else {
          if (this.returnType !== 'id') {
            this.$emit('userInfo', this.returnUserInfo)
          } else {
            this.$emit('userInfo', this.userId)
          }
        }
      } else {
        if (this.returnType !== 'id') {
          this.$emit('userInfo', this.returnUserInfo)
        } else {
          this.$emit('userInfo', this.userId)
        }
      }
    },
  },
}
</script>
